<!--
 * @Description: 
 * @Date: 2023-12-20 16:41:11
 * @LastEditTime: 2024-02-04 16:05:11
-->
<template>
  <div class="dbxxLevel">
    <div class="dbxxLevel-list">
      <el-row :gutter="30">
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="6"
          :lx="6"
          v-for="item in LevelList"
          :key="item.id"
          style="margin-bottom: 20px"
        >
          <div class="list-item animate__animated animate__zoomIn">
            <div>
              <p>
                {{
                  item.area +
                  `第${item.session}届人民代表大会` +
                  `第${item.orderName}次会议` +
                  `(${item.annual})`
                }}
              </p>
              <span
                >开始时间: {{ parseTime(item.startTime, "{y}-{m}-{d}") }}</span
              >
              <span
                >结束时间: {{ parseTime(item.endTime, "{y}-{m}-{d}") }}</span
              >
            </div>
            <div>
              <el-button
                style="background: #e99d42; color: #fff"
                size="small"
                @click="handleUpdate(item)"
                >修改</el-button
              >
              <el-button
                style="background: #c65349; color: #fff"
                size="small"
                @click="handleDelete(item)"
                >删除</el-button
              >
              <el-button
                style="background: #538fb9; color: #fff"
                size="small"
                @click="handleSync(item)"
                >同步代表</el-button
              >
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :lx="6">
          <div
            class="list-item animate__animated animate__zoomIn"
            @click="handleAdd"
          >
            <i class="el-icon-plus" style="font-size: 50px"></i>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="地区" prop="area">
              <el-input
                v-model="form.area"
                placeholder="请输入地区"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="届" prop="session">
              <el-input v-model="form.session" placeholder="请输入届" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="次" prop="orderName">
              <el-select
                v-model="form.orderName"
                placeholder="请输入次"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in orderList"
                  :key="dict"
                  :label="dict"
                  :value="dict"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="年度" prop="annual">
              <el-date-picker
                v-model="form.annual"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始时间"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择结束时间"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="是否当届" prop="isSession">
              <el-switch
                active-value="1"
                inactive-value="0"
                v-model="form.isSession"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注信息" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <tongbuDialog
      v-model="tongVisible"
      v-if="tongVisible"
      :tongId="tongId"
    ></tongbuDialog>
  </div>
</template>

<script>
import axios from "axios";
import {
  addSession,
  addSessionList,
  deleteSession,
  getSessionItem,
  updateSessionList,
} from "@/api/dbxx/dbxxLevel/index";
import tongbuDialog from "./tongbuDialog";
import { parseTime } from "@/utils/index";
export default {
  name: "Level",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      LevelList: [],
      form: {},
      rules: {
        area: [{ required: true, message: "请输入地区", trigger: "blur" }],
        session: [{ required: true, message: "请输入届", trigger: "blur" }],
        orderName: [{ required: true, message: "请输入次", trigger: "blur" }],
        annual: [{ required: true, message: "请输入年度", trigger: "blur" }],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      open: false,
      title: "添加届次",
      orderList: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
      tongId: null,
      tongVisible: false,
    };
  },
  components: {
    tongbuDialog,
  },
  mounted() {
    this.getList();
  },
  methods: {
    reset() {
      this.form = {
        area: undefined,
        session: undefined,
        orderName: undefined,
        annual: undefined,
        startTime: undefined,
        endTime: undefined,
        isSession: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    },
    getList() {
      addSessionList().then((res) => {
        this.LevelList = res.rows;
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.seId != undefined) {
            updateSessionList(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSession(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.open = false;
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加届次";
    },
    handleUpdate({ seId }) {
      this.reset();
      getSessionItem(seId).then((res) => {
        this.form = res.data;
        this.title = "修改届次信息";
        this.open = true;
      });
    },
    handleDelete({ seId }) {
      this.$confirm("此操作将永久删除该届次, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return deleteSession(seId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handleSync(row) {
      this.tongId = row.seId;
      this.tongVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.dbxxLevel {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  overflow: auto;
  &-list {
    width: 100%;
    .list-item {
      width: 100%;
      height: 170px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
        1px -1px 2px rgba(0, 0, 0, 0.1), -1px 1px 2px rgba(0, 0, 0, 0.1),
        -1px -1px 2px rgba(0, 0, 0, 0.1);
      border: 1px solid #bbbbbb;
      overflow-y: hidden;
      & > div:nth-child(1) {
        width: 100%;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 20px;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        & > p {
          color: #d33334;
          font-weight: bold;
          margin: 20px 0;
        }
        & > span {
          font-size: 12px;
          margin-bottom: 5px;
        }
      }
      & > div:nth-child(2) {
        width: 100%;
        display: flex;
        padding: 10px 15px;
        box-sizing: border-box;
        background: #efefef;
      }
    }
    .list-item:last-child {
      align-items: center;
    }
  }
}
.el-button--small {
  padding: 6px 15px;
}
</style>
